<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:400px;height:200px;border:solid 1px black;margin:10px auto;position: relative;background: #ccc;overflow: hidden;}
        /* 无缝2：因为多出一张图片元素，记得修改容器尺寸 */
        .imgbox{width:2400px;position: absolute;}
        .imgbox .item{width:400px;height:200px;font-size: 80px;line-height:200px;text-align:center;float: left;}
        .item:nth-child(1){background: #399;}
        .item:nth-child(2){background: #393;}
        .item:nth-child(3){background: #993;}
        .item:nth-child(4){background: #939;}
        .item:nth-child(5){background: #339;}
        .item:nth-child(6){background: #399;}

        .btns input{position: absolute;width:40px;height:40px;top:80px;}
        #left{left:0;}
        #right{right:0;}
    </style>
</head>
<body>
    <div class="box">
        <div class="imgbox">
            <div class="item">0</div>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <!-- 无缝1：将第一张图，复制到最后一张 -->
            <div class="item">0</div>
        </div>
        <div class="btns">
            <input type="button" value="<" id="left">
            <input type="button" value=">" id="right">
        </div>
    </div>
</body>
<script src="../move.js"></script>
<script>
    function Banner(){
        this.left = document.querySelector("#left")
        this.right = document.querySelector("#right")
        this.items = document.querySelectorAll(".item")
        this.imgbox = document.querySelector(".imgbox")
        this.index = 0;
        this.addEvent();
    }
    Banner.prototype.addEvent = function(){
        const that = this;
        this.left.onclick = function(){
            that.changeIndexLeft();
        }
        this.right.onclick = function(){
            that.changeIndexRight();
        }
    }
    Banner.prototype.changeIndexLeft = function(){
        if(this.index === 0){
            // 无缝
            this.index = this.items.length-2;
            this.imgbox.style.left = -(this.items.length-1)*this.items[0].offsetWidth + "px";
        }else{
            this.index--;
        }
        this.changePos();
    }
    Banner.prototype.changeIndexRight = function(){
        if(this.index === this.items.length-1){
            // 无缝3：因为多出的图片和第一张一模一样，没有必要重复出现，索引到终点之后的初始值为第二张图片的索引
            this.index = 1;
            // 无缝4：索引到终点后，瞬间强行设置imgbox的left位置为初始位置0
            this.imgbox.style.left = 0;
        }else{
            this.index++
        }
        this.changePos();
    }
    Banner.prototype.changePos = function(){
        move(this.imgbox, {left: this.index * -400});
    }
    new Banner();
    


</script>
</html>